diff --git a/web/assets.js b/web/assets.js new file mode 100644 --- /dev/null +++ b/web/assets.js @@ -0,0 +1,8 @@ +// @flow + +export const assetCacheURLPrefix = 'https://dh9fld3hutpxf.cloudfront.net'; + +// Background Illustration +export const backgroundIllustrationFileName = 'background-illustration.svg'; +export const backgroundIllustrationHeight = '100px'; +export const backgroundIllustrationWidth = '133px'; diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css --- a/web/chat/chat-thread-list.css +++ b/web/chat/chat-thread-list.css @@ -294,8 +294,14 @@ height: 6px; } -div.emptyItem { - padding: 10px; +div.emptyItemContainer { + display: flex; + flex-direction: column; + align-items: center; +} + +div.emptyItemText { + padding: 16px; font-size: 16px; text-align: center; white-space: pre-wrap; diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js --- a/web/chat/chat-thread-list.react.js +++ b/web/chat/chat-thread-list.react.js @@ -5,6 +5,12 @@ import { emptyItemText } from 'lib/shared/thread-utils'; +import { + assetCacheURLPrefix, + backgroundIllustrationFileName, + backgroundIllustrationHeight, + backgroundIllustrationWidth, +} from '../assets'; import Search from '../components/search.react'; import ChatThreadListItem from './chat-thread-list-item.react'; import css from './chat-thread-list.css'; @@ -47,7 +53,16 @@ } function EmptyItem() { - return
{emptyItemText}
; + return ( +
+ +
{emptyItemText}
+
+ ); } export default ChatThreadList;